<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>

    <script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body {
            /*background-color:#00b38a;*/
            text-align:center;
        }

        .lp-login {
            position:absolute;
            width:500px;
            height:300px;
            top:50%;
            left:50%;
            margin-top:-250px;
            margin-left:-250px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #cbcbdb;
            padding: 57px 50px 35px;
            box-sizing: border-box
        }


        .lp-login .submitBtn {
            display:block;
            text-decoration:none;
            height: 48px;
            width: 150px;
            line-height: 48px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            background-image: -webkit-gradient(linear, left top, right top, from(#1024e7e8), to(#1024e7e8));
            background-image: linear-gradient(90deg, #1024e7e8, #1024e7e8);
            border-radius: 3px
        }


        input[type='text'] {
            height:30px;
            width:250px;
        }

        input[type='password'] {
            height:30px;
            width:250px;
        }

        span {
            font-style: normal;
            font-variant-ligatures: normal;
            font-variant-caps: normal;
            font-variant-numeric: normal;
            font-variant-east-asian: normal;
            font-weight: normal;
            font-stretch: normal;
            font-size: 14px;
            line-height: 22px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica;
        }

    </style>

</head>
<body>

<form>
    <table class="lp-login">
        <tr>
            <td align="right"><span>邮箱</span></td>
            <td align="center">
                <input type="text" id="username"/>
            </td>
        </tr>
        <tr>
            <td align="right"><span>密码</span></td>
            <td align="center">
                <input type="password" id="password" />
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <a href="#" class="submitBtn" ><span>登 录</span></a>
            </td>
        </tr>
       <tr>
           <td colspan="2">
               <a href="/static/register.html"><span>注册新账号</span></a>
           </td>
       </tr>
    </table>
</form>

</body>
<script type="text/javascript">
  $(function(){
    $(".submitBtn").bind("click",function(){
      var username = $("#username").val();
      var password = $("#password").val();

      if(username == null || $.trim(username).length == 0 || password == null || $.trim(password).length == 0){
        alert("sorry,必须输入账号和密码~");
        return;
      }

      $.ajax({
        url:'http://localhost/api/user/login/' + username.split(' ')[0] + "/" + password.split(' ')[0],
        type:'GET',    //GET
        async:false,    //或false,是否异步
        timeout:5000,    //超时时间
        dataType:'text', //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(resp){
          if (resp == "") {
            alert("登录失败,请重试");
          } else {
            window.location.href = "/static/welcome.html";
            return false;
          }
        }
      })
    })
  })

</script>
</html>
